<template>
	<view class="wheel"
		:style="`background: url(${$util.prefix(tab == 1 ? 'live/wheel_bg.png' : 'live/wheel_2025_bg.png')}) 0 0 no-repeat;`">

		<!-- <view class="flex_r_around">
			<view class="people-tab flex_r_between">
				<view class="item flex_r_between" :id="people_click_tab == 1 ? 'select' : ''" @click="onPeopleClickTab(1)">
					<view class="left">
						主播
					</view>
					
					<view class="right flex_center">
						<image src="/static/public/alipay.png" mode="aspectFill"></image>
						<u-icon name="arrow-down-fill" color="#FFFFFF" size="18rpx"></u-icon>
					</view>
				</view>
				
				<view class="item flex_r_between" :id="people_click_tab == 2 ? 'select' : ''" @click="onPeopleClickTab(2)">
					<view class="left">
						好友
					</view>
					
					<view class="right flex_center">
						<image src="/static/public/alipay.png" mode="aspectFill"></image>
						<u-icon name="arrow-down-fill" color="#FFFFFF" size="18rpx"></u-icon>
					</view>
				</view>
			</view>
		</view> -->

		<view class="barrage">
			<lff-barrage ref="lffBarrage" type="leftBottom"></lff-barrage>
		</view>

		<view class="toast" :id="toast ? 'toast' : ''">
			请先选择抽中的礼物送给哪位主播才能抽奖
		</view>

		<view class="blind">

			<view class="tab-btn flex_r_around">
				<view class="item" :id="tab == 2 ? 'select2' : ''" @click="onTab(2)">初级场</view>
				<view class="item" :id="tab == 1 ? 'select' : ''" @click="onTab(1)">高级场</view>
			</view>

			<LuckyWheel :blocks="blocks" :prizes="prizes" :buttons="buttons" ref="LuckDraw" @start="startCallBack(1)"
				@end="endCallBack" :default-config="defaultConfig" v-if="tab == 1" />

			<LuckyWheel :blocks="blocks2" :prizes="prizes2" :buttons="buttons2" ref="LuckDraw2"
				@start="startCallBack2(1)" @end="endCallBack2" :default-config="defaultConfig2" v-if="tab == 2" />

			<!-- <view class="skip_animation flex_center" @click="skip_animation = !skip_animation">
				<view class="icon flex_r_around">
					<u-icon v-if="skip_animation" size="26rpx" :name="$util.prefix('live/select-check.png')"></u-icon>
				</view>
				<text>跳过动画</text>
			</view> -->
		</view>

		<view class="btn_box flex_r_between" v-if="tab == 1">
			<view class="btn btn1 flex_r_around" @click="startCallBack(1)"
				:id="pending_btn_index == 0 ? 'btn_pending' : ''">
				<text>{{ tab == 1 ? singGoldPrice : singGoldPrice2 }}金币</text>
			</view>
			<view class="btn btn2 flex_r_around" @click="startCallBack(10)"
				:id="pending_btn_index == 1 ? 'btn_pending' : ''">
				<text>{{ (tab == 1 ? singGoldPrice : singGoldPrice2) * 10 }}金币</text>
			</view>
			<view class="btn btn3 flex_r_around" @click="startCallBack(100)"
				:id="pending_btn_index == 2 ? 'btn_pending' : ''">
				<text>{{ (tab == 1 ? singGoldPrice : singGoldPrice2) * 100 }}金币</text>
			</view>
		</view>

		<view class="btn_box flex_r_between" v-else>
			<view class="btn btn1 flex_r_around" @click="startCallBack2(1)"
				:id="pending_btn_index == 0 ? 'btn_pending' : ''">
				<text>{{ tab == 1 ? singGoldPrice : singGoldPrice2 }}金币</text>
			</view>
			<view class="btn btn2 flex_r_around" @click="startCallBack2(10)"
				:id="pending_btn_index == 1 ? 'btn_pending' : ''">
				<text>{{ (tab == 1 ? singGoldPrice : singGoldPrice2) * 10 }}金币</text>
			</view>
			<view class="btn btn3 flex_r_around" @click="startCallBack2(100)"
				:id="pending_btn_index == 2 ? 'btn_pending' : ''">
				<text>{{ (tab == 1 ? singGoldPrice : singGoldPrice2) * 100 }}金币</text>
			</view>
		</view>

		<view class="gold_box flex_r_between">
			<view class="left flex_center">
				<image src="/static/recharge/gold_coins.png"></image>
				<text>我的金币：{{ balance || 0 }}</text>
			</view>
			<view class="right flex_center" @click="$native.toRecharge()">
				<text>充值</text>
				<u-icon name="arrow-right" size="24rpx" color="#FFF"></u-icon>
			</view>
		</view>

		<view class="tags_list flex_c">
			<view class="line"></view>
			<view class="tags" @click="openList">
				<image :src="$util.prefix('live/tag_list.png')"></image>
			</view>

			<view class="center_line"></view>

			<view class="tags" @click="rich_modal = true">
				<image :src="$util.prefix('live/tag_rich.png')"></image>
			</view>

			<view class="center_line"></view>

			<view class="tags" @click="agree_modal = true">
				<image :src="$util.prefix('live/tag_agree.png')"></image>
			</view>
		</view>

		<view class="loading flex_c" v-if="!loaded">
			<view style="height: 60rpx;"></view>
			<ProgressBar :Width="percent" Type="candy"></ProgressBar>
		</view>

		<wLoading ref="loading"></wLoading>

		<!-- 获奖弹窗 -->
		<view @touchmove.stop.prevent="preventHandler">
			<u-popup :show="modal" @close="modal = false" mode="center" bgColor="transparent"
				:safeAreaInsetBottom="false">
				<view class="success flex_c" v-if="tab == 1">
					<view class="grid">
						<u-grid :border="false" :col="getCol()">
							<u-grid-item v-for="(item,index) in success_list" :key="index">
								<view class="item flex_r_around">
									<image :src="item.img" mode="aspectFill"></image>
									<view class="price flex_r_around">
										<text>×{{ item.num }}</text>
									</view>
								</view>
								<view class="modal-gift-price flex_center">
									<image src="/static/recharge/gold_coins.png" mode="aspectFill"></image>
									<text>{{ (Number(item.rmb_price) * 10).toFixed(0) }}</text>
								</view>
							</u-grid-item>
						</u-grid>

						<view class="all_price flex_r_around">
							<view class="flex_center">
								<text>礼物总价值: {{ all_price }}</text>
								<image src="/static/recharge/gold_coins.png"></image>
							</view>
						</view>
					</view>

					<view class="icon-close" @click="modal = false">
						<u-icon name="close-circle" color="#FFF" size="56rpx"></u-icon>
					</view>

					<!-- <view class="close_text">
						点击任意区域关闭
					</view> -->

				</view>

				<view class="success2 flex_c" v-if="tab == 2">

					<image class="title" :src="$util.prefix('extension/wheel_success_title.png')" mode="aspectFill">
					</image>

					<view class="grid">
						<u-grid :border="false" :col="getCol()">
							<u-grid-item v-for="(item,index) in success_list" :key="index">
								<view class="item flex_c">
									<image :src="item.img" mode="aspectFill"></image>
									<view class="price flex_center">
										<i>×</i>
										<text>{{ item.num }}</text>
									</view>
								</view>
							</u-grid-item>
						</u-grid>
					</view>

					<view class="all_price">
						总计: {{ all_price }}金币
					</view>

					<view class="icon-close" @click="modal = false">
						<u-icon name="close-circle" color="#666" size="56rpx"></u-icon>
					</view>
				</view>
			</u-popup>
		</view>

		<!-- 规则 -->
		<view @touchmove.stop.prevent="preventHandler">
			<u-popup :show="rich_modal" @close="rich_modal = false" mode="bottom" bgColor="transparent"
				:safeAreaInsetBottom="false">

				<view class="bottom_popup flex_c">
					<view class="popup_title">
						<view class="liner-text">
							活动规则
						</view>
					</view>
					<view class="popup_content">
						<scroll-view scroll-y="true">
							<view class="rich">

								<view class="text">蛇年好运UU派对推出的趣味玩法，跟超圈平台无关</view>
								<view class="text">在使用本游戏前，请必须仔细阅读并充分理解同意本规则。参与游戏即视为您已同意本规则相关约束。</view>
								<view class="text">1、玩法说明：</view>
								<view class="text">
									（1）通过消费金币，获得行好运机会。初级场每次需要{{ singGoldPrice2 }}金币，高级场每次需{{ singGoldPrice }}金币。</view>
								<view class="text">（2）通过游戏活动获得的虚拟礼物放在礼物背包中，可消费打赏。</view>
								<view class="text">2、行为限制</view>
								<view class="text">（1）本游戏玩法仅为增加互动趣味，严禁通过本活动进行礼物买卖，赌博，洗钱，套现等违法等非趣味娱乐用途。</view>
								<view class="text">（2）本活动严禁未成年人参与，如发信未成年参与将没收所涉及主播，公会，用户的资金，并根据《超圈运营管理办法》和违反情节做出惩处。
								</view>
								<view class="text">3、本活动送出虚拟礼物数量如下，数量有限合理消费</view>

								<view class="table-tit">初级场</view>
								<view class="table">
									<view class="header flex_center">
										<view class="item flex_r_around">
											<text>礼物</text>
										</view>
										<view class="item flex_r_around">
											<text>礼物价值(金币)</text>
										</view>
										<view class="item flex_r_around" id="no_right">
											<text>概率</text>
										</view>
									</view>
									<view class="table_list flex_center" v-for="(item,index) in prizeList2" :key="index"
										:id="index == (prizeList2.length-1) ? 'no_bottom' : ''">
										<view class="item flex_center">
											<image :src="item.img" mode="aspectFill"></image>
											<text class="hidden">{{ item.name }}</text>
										</view>
										<view class="item flex_r_around">
											<text>{{ Number(item.gold_price).toFixed(0) }}</text>
										</view>
										<view class="item flex_r_around" id="no_right">
											<text>{{
												index == 0 ? '33.23%'
												: index == 1 ? '47.67%'
												: index == 2 ? '15.73%'
												: index == 3 ? '2.73%'
												: index == 4 ? '0.33%'
												: index == 5 ? '0.20%'
												: index == 6 ? '0.06%'
												: '0.03%'
											}}</text>
										</view>
									</view>
								</view>

								<view class="table-tit">高级场</view>
								<view class="table">
									<view class="header flex_center">
										<view class="item flex_r_around">
											<text>礼物</text>
										</view>
										<view class="item flex_r_around">
											<text>礼物价值(金币)</text>
										</view>
										<view class="item flex_r_around" id="no_right">
											<text>概率</text>
										</view>
									</view>
									<view class="table_list flex_center" v-for="(item,index) in prizeList" :key="index"
										:id="index == (prizeList.length-1) ? 'no_bottom' : ''">
										<view class="item flex_center">
											<image :src="item.img" mode="aspectFill"></image>
											<text class="hidden">{{ item.name }}</text>
										</view>
										<view class="item flex_r_around">
											<text>{{ Number(item.gold_price).toFixed(0) }}</text>
										</view>
										<view class="item flex_r_around" id="no_right">
											<text>{{
												index == 0 ? '19.30%'
												: index == 1 ? '30.80%'
												: index == 2 ? '37.08%'
												: index == 3 ? '10.00%'
												: index == 4 ? '2.20%'
												: index == 5 ? '0.40%'
												: index == 6 ? '0.10%'
												: index == 7 ? '0.06%'
												: index == 8 ? '0.04%'
												: '0.02%'
											}}</text>
										</view>
									</view>
								</view>

							</view>
						</scroll-view>
					</view>
				</view>

			</u-popup>
		</view>

		<!-- 记录 -->
		<view @touchmove.stop.prevent="preventHandler">
			<u-popup :show="list_modal" @close="list_modal = false" mode="bottom" bgColor="transparent"
				:safeAreaInsetBottom="false">

				<view class="bottom_popup flex_c">
					<view class="popup_title_tab flex_r_arounds">
						<view class="item flex_c" :id="list_tab == 1 ? 'select' : ''" @click="onListTab(1)">
							<text class="liner-text" v-if="list_tab == 1">记录</text>
							<text class="text" v-else>记录</text>
							<i></i>
						</view>

						<!-- <view class="item flex_c" :id="list_tab == 2 ? 'select' : ''" @click="onListTab(2)">
							<text class="liner-text" v-if="list_tab == 2">平台记录</text>
							<text class="text" v-else>平台记录</text>
							<i></i>
						</view> -->
					</view>
					<view class="popup_content" v-if="list_tab == 1">
						<scroll-view :scroll-y="true" @scrolltolower="onReach">
							<view class="list">
								<view class="item flex_center" v-for="(item,index) in list" :key="index">
									<view class="left flex_center">
										<!-- <view class="avatar">
											<image :src="item.to_avatar" mode="aspectFill"></image>
										</view> -->
										<view class="text">
											<view class="name hidden">抽中 {{ item.prize_name }}</view>
											<view class="info flex_center">
												<text>总价值</text>
												<i>{{ item.prize_gold_price }}</i>
												<text>金币</text>
											</view>
											<view class="time hidden">
												<uni-dateformat :date="item.create_time*1000"
													format="yyyy-MM-dd hh:mm:ss"></uni-dateformat>
											</view>
										</view>
									</view>
									<view class="right">
										<image :src="item.gift_img" mode="aspectFill"></image>
									</view>
								</view>
							</view>
							<view class="loading_block" v-if="total > list.length">
								<u-loading-icon mode="semicircle" color="#FFF"></u-loading-icon>
							</view>
						</scroll-view>
					</view>

					<view class="popup_content" v-if="list_tab == 2">
						<scroll-view :scroll-y="true" @scrolltolower="onReachPrizeLog">
							<view class="list">
								<view class="item flex_center" v-for="(item,index) in prizeLog" :key="index">
									<view class="left flex_center">
										<view class="avatar">
											<image :src="item.avatar" mode="aspectFill"></image>
										</view>
										<view class="text">
											<view class="name hidden">抽中 {{ item.prize_name }}</view>
											<view class="info flex_center">
												<text>总价值</text>
												<i>{{ item.prize_gold_price }}</i>
												<text>金币</text>
											</view>
											<view class="time hidden">
												<uni-dateformat :date="item.create_time*1000"
													format="yyyy-MM-dd"></uni-dateformat>
											</view>
										</view>
									</view>
									<view class="right">
										<image :src="item.gift_img" mode="aspectFill"></image>
									</view>
								</view>
							</view>
							<view class="loading_block" v-if="total > list.length">
								<u-loading-icon mode="semicircle" color="#FFF"></u-loading-icon>
							</view>
						</scroll-view>
					</view>
				</view>

			</u-popup>
		</view>

		<!-- 规则 -->
		<view @touchmove.stop.prevent="preventHandler">
			<u-popup :show="agree_modal" @close="agree_modal = false" mode="bottom" bgColor="transparent"
				:safeAreaInsetBottom="false">

				<view class="bottom_popup flex_c">
					<view class="popup_title">
						<view class="liner-text">
							活动声明
						</view>
					</view>
					<view class="popup_content">
						<scroll-view scroll-y="true">
							<view class="rich">
								<view class="text">
									1.活动期间，用户应当遵守法律法规及平台规则，如发现用户违规(包括但不限于使用外挂作弊、恶意套现、反向兑换现金、倒买倒卖、洗钱等违背诚实信用或损害其他用户、平台及任何第三方合法权益的行为)，平台有权撤销用户活动参与资格，收回全部权益，必要时追究法律责任，并有权视情况对用户采取限制、封禁帐号、冻结资金以做进一步查证处理
								</view>
								<view class="text">
									2.任何人不得利用本次活动进行博彩或其他违法行为，对于本平台用户，一经发现，本平台将立即取消用户参与资格并收回所得奖励。如行为构成犯罪，将移交司法机关处理。如给平台造成其他损失，同时应当承担赔偿责任
								</view>
								<view class="text">
									3.平台严禁并严厉打击任何以盈利为目的的线下非法交易行为任何人以本平台名义宣称或从事类似活动或恶意发放、转让、回收、奖励、欺诈等造成用户损失的，本平台无需为此承担任何法律责任
								</view>
								<view class="text">
									4.因用户操作不当或用户所在地区网络故障、支付平台网络故障、电信运营商故障、第三方其他平台限制等非平台所能控制的原因导致的用户无法参与活动、或参与失败，平台无需为此承担任何法律责任
								</view>
								<view class="text">
									5.平台可以根据本活动的实际情况，在法律允许的范围内，为保障消费者的权益，对活动规则进行变动或调整，相关变动或调整将公布在活动页面上，并于公布时即时生效
								</view>
								<view class="text">
									6.如对活动规则或其他有任何问题，请联系在线客服咨询
								</view>
								<view class="text">
									7.仅限18岁及以上用户参加，禁止未成年充值、打赏行为
								</view>
								<view class="text">
									8.适度参与活动，合理安排时间避免过度沉迷
								</view>
								<view class="text">
									9.本活动与Apple Inc,无关。
								</view>
							</view>
						</scroll-view>
					</view>
				</view>

			</u-popup>
		</view>

		<!-- 首次进入规则弹窗 -->
		<view @touchmove.stop.prevent="preventHandler">
			<u-popup :show="first_modal" @close="first_modal = false" mode="center" bgColor="transparent"
				:safeAreaInsetBottom="false" :closeOnClickOverlay="false">
				<view class="first_popup flex_c">
					<view class="first_content">
						<scroll-view scroll-y="true">
							<view>本功能玩法不向未成年人开放，未成年人用户请勿参与。</view>
							<view>1.本平台玩法均为为提升用户体验设计，任何用户和主播均不得利用平台玩法实施任何违法犯罪的行为或用于任何违法犯罪的用户</view>
							<view>2.本平台玩法中获得的礼物和奖励仅限于在平台内消费，禁止主播、主播所在公会、用户及其他第三方主体进行任何形式的背包礼物交易;</view>
							<view>3.健康游戏，理性消费，如存在上述行为，平台将严格按照平台规则采取相关管理措施:</view>
						</scroll-view>
					</view>
					<view class="first_check flex_center" @click="first_check = !first_check">
						<view class="icon">
							<u-icon :name="first_check ? 'checkmark-circle-fill' : 'checkmark-circle'"
								:color="first_check ? '#FBC165' : '#FFF'" size="32rpx"></u-icon>
						</view>
						<view class="first_text flex_r_around">
							<text>我已阅读并同意</text>
						</view>
						<view class="first_text flex_r_around"
							@click="$util.toUrl('/pages/agreement/agreementByMy?type=game_conventions')">
							<i>《玩法须知和公约》</i>
						</view>
					</view>
					<view class="first_btn flex_r_between">
						<view @click="$native.backAction()" class="first_btn_item flex_r_around"
							:style="`background: url(${$util.prefix('live/wheel_agree_no.png')}) 0 0 no-repeat;`">

						</view>
						<view @click="onAgree" class="first_btn_item flex_r_around"
							:style="`background: url(${$util.prefix('live/wheel_agree_yes.png')}) 0 0 no-repeat;`">
						</view>
					</view>
				</view>
			</u-popup>
		</view>

		<!-- 选择主播 -->
		<view @touchmove.stop.prevent="preventHandler">
			<uni-popup ref="people" type="center" border-radius="10px">
				<view class="choose-people">
					<scroll-view scroll-y="true">
						<view class="item flex_center">
							<view class="people-item flex_center">
								<view class="avatar flex_r_around">
									<image class="avatar-image" src="/static/public/alipay.png" mode="aspectFill"></image>
									<image class="avatar-border-image" src="/static/public/select.png" mode="aspectFill"></image>
								</view>
								<view class="left">
									<view class="top flex_center">
										<text class="hidden">苏苏姐姐</text>
										<view>Lv.10</view>
									</view>
									
									<view class="bottom flex_center">
										<text class="hidden">北京 朝阳</text>
										<image :src="$util.prefix(`public/sex_${1}_no_bg.png`)" mode="aspectFill"></image>
										<i>24</i>
									</view>
								</view>
							</view>
							
							<view class="select-image">
								<image src="/static/public/select_s.png" mode="aspectFill"></image>
							</view>
						</view>
					</scroll-view>
				</view>
			</uni-popup>
		</view>
		
		<!-- 选择用户 -->
		<view @touchmove.stop.prevent="preventHandler">
			<uni-popup ref="friends" type="center" border-radius="10px">
				<view class="choose-friends flex_c">
					<view class="firends-input">
						<input type="text" placeholder="搜索好友昵称/ID" placeholder-class="input-placeholder" v-model="key"
							confirm-type="search" />
					</view>
					
					<scroll-view scroll-y="true">
						<view class="friends-list">
							<view class="item flex_center">
								<view class="firends-content flex_center">
									<view class="avatar">
										<image src="/static/public/alipay.png" mode="aspectFill"></image>
									</view>
									
									<view class="right">
										<view class="top hidden">苏苏姐姐</view>
										<view class="bottom flex_center">
											<text class="hidden">北京 朝阳</text>
											<image :src="$util.prefix(`public/sex_${1}_no_bg.png`)" mode="aspectFill"></image>
											<i>24</i>
										</view>
									</view>
								</view>
								<view class="select-image">
									<image src="/static/public/select_s.png" mode="aspectFill"></image>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</uni-popup>
		</view>
		
		<!-- 用户异常弹窗 -->
		<!-- <uni-popup ref="modal" type="center" border-radius="10px">
			<view class="errer-modal flex_c">
				<view class="errer-icon flex_c">
					<view class="errer-icon-big"></view>
					<view class="errer-icon-small"></view>
				</view>
				
				<view class="errer-text">
					<view>账号异常</view>
					<view>请重新选择赠送对象</view>
				</view>
				
				<view class="errer-btn flex_r_between">
					<view class="cancel flex_r_around" @click="putInBag">
						<text>放入背包</text>
					</view>
					
					<view class="comfirm flex_r_around" @click="onPeopleChooseAgain">
						<text>重新选择</text>
					</view>
				</view>
			</view>
		</uni-popup> -->
		
		<!-- 用户异常后 重新选择弹窗 -->
		<uni-popup ref="chooseAgain" type="center" border-radius="10px">
			<view class="choose-again">
				
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	import wLoading from "@/components/w-loading/w-loading.vue";
	import LuckyWheel from '@/components/@lucky-canvas/uni/lucky-wheel';
	import ProgressBar from '@/components/Progress-Bar/Progress-Bar.vue';
	import lffBarrage from '@/components/lff-barrage/lff-barrage.vue'
	export default {
		components: {
			wLoading,
			LuckyWheel,
			ProgressBar,
			lffBarrage,
		},
		watch: {
			count: function(val, old) {
				if (val === this.load_image.length) { // 图片全部加载完成后跳转页面
					this.loaded = true;
				}
			},
		},
		data() {
			return {
				// 图片预加载 数组
				load_image: [
					'https://qiniu-cdn.maeiyun.com//h5static/live/wheel_start.png',
					'https://qiniu-cdn.maeiyun.com//h5static/live/start_1.png',
					'https://qiniu-cdn.maeiyun.com//h5static/live/start_10.png',
					'https://qiniu-cdn.maeiyun.com//h5static/live/start_50.png',
					'https://qiniu-cdn.maeiyun.com//h5static/live/wheel_content.png',
					'https://qiniu-cdn.maeiyun.com//h5static/live/wheel_bg.png',
					'https://qiniu-cdn.maeiyun.com//h5static/live/tag_rich.png',
					'https://qiniu-cdn.maeiyun.com//h5static/live/tag_list.png',
					'https://qiniu-cdn.maeiyun.com//h5static/live/tag_agree.png',
					'https://qiniu-cdn.maeiyun.com//h5static/live/people_select.png',
					'https://qiniu-cdn.maeiyun.com//h5static/live/no_people_toast.png',
					'https://qiniu-cdn.maeiyun.com//h5static/live/popup_title_rich.png',
					'https://qiniu-cdn.maeiyun.com//h5static/live/popup_title_list.png',
					'https://qiniu-cdn.maeiyun.com//h5static/live/popup_title_agree.png',
					'https://qiniu-cdn.maeiyun.com//h5static/live/popup_bg.png',
					'https://qiniu-cdn.maeiyun.com//h5static/live/wheel_agree_bg.png',
					'https://qiniu-cdn.maeiyun.com//h5static/live/wheel_agree_yes.png',
					'https://qiniu-cdn.maeiyun.com//h5static/live/wheel_agree_no.png',
					// 转盘背景
					'https://qiniu-cdn.maeiyun.com//h5static/extension/wheel_circle_bg.png',
					// 抽奖按钮(指针)
					'https://qiniu-cdn.maeiyun.com//h5static/extension/wheel_btn.png',
				],
				// 加载完成数量
				count: 0,
				// 预加载状态
				loaded: false,
				// 进度
				percent: 0,

				defaultConfig: {
					gutter: '0px',
					speed: 10,
					accelerationTime: 1000,
					decelerationTime: 1000,
				},

				buttons: [{
					radius: '20px',
					imgs: [{
						src: 'https://qiniu-cdn.maeiyun.com//h5static/live/wheel_start.png',
						width: "240%",
						top: '-300%'
					}],
				}],

				blocks: [{
					padding: '16px',
					background: '#FFBEB7',
					imgs: [{
						src: 'https://qiniu-cdn.maeiyun.com//h5static/live/wheel_content.png',
						width: "100%",
					}],
				}, ],

				prizes: [],

				isable: true,

				modal: false,

				toast: false,
				people_list: [],
				select_people: 0,


				success_list: [],
				all_price: 0,

				balance: 0,


				// 规则
				rich_modal: false,
				// 记录
				list_modal: false,
				// 法律
				agree_modal: false,
				list: [],
				total: 0,
				page: 1,

				rid: 0,

				singGoldPrice: 0,

				first_modal: false,
				first_check: false,

				num: 1,

				prizeList: [],

				skip_animation: false,

				tab: 2,


				defaultConfig2: {
					gutter: '0',
					speed: 10,
					accelerationTime: 1000,
					decelerationTime: 1000,
				},

				buttons2: [{
					radius: '30px',
					imgs: [{
						src: 'https://qiniu-cdn.maeiyun.com//h5static/extension/wheel_btn.png',
						width: "160%",
						top: '-160%'
					}],
					fonts: [{
							text: '点击',
							top: '-60%',
							fontSize: 16,
							fontWeight: 600,
							fontColor: '#C633B3',
						},
						{
							text: '抽奖',
							top: '10%',
							fontSize: 16,
							fontWeight: 600,
							fontColor: '#C633B3',
						},
					]
				}],

				blocks2: [{
					padding: '16px',
					background: '#DCDBDA',
					imgs: [{
						src: 'https://qiniu-cdn.maeiyun.com//h5static/extension/wheel_circle_bg.png',
						width: "100%",
					}],
				}, ],

				prizes2: [],
				prizeList2: [],

				singGoldPrice2: 0,

				list_tab: 1,

				prizeLog: [],
				prizePage: 1,
				prizeTotal: 1,

				pending_btn_index: -1,
				
				// 用户搜索字段
				key: '',
				
				// 5.14新需求
				people_click_tab: 1,
				
				status1: 0,
				status2: 0,

			}
		},
		methods: {
			preLoad() {
				for (let url of this.load_image) {
					let image = new Image();
					image.src = url;
					image.onload = () => {
						this.count++;
						//加载完毕事件
						// 计算图片加载的百分数，绑定到percent变量
						let percentNum = Math.floor(this.count / this.load_image.length * 100);
						this.percent = percentNum;
					}
				}
			},

			// 原生交互 获取直播间麦位成员信息
			getPeopleList(list) {
				var list = JSON.parse(list);
				list.forEach(element => {
					if (element.userId) {
						this.people_list.push(element);
					}
				})
			},

			preventHandler() {
				return;
			},

			// 转盘初始化
			getInit(refresh = true) {
				this.$post('/active.trafficPrizeV3/getInitInfo').then(res => {
					this.status1 = res.data.status;
					this.haveNum = res.data.haveNum;
					this.singGoldPrice = Number(res.data.singGoldPrice).toFixed(0)
					this.isable = true;

					if (refresh) {
						this.prizeList = res.data.prizeList;
						for (var i = 0; i < res.data.prizeList.length; i++) {
							var element = res.data.prizeList[i];
							this.prizes.push({
								id: element.id,
								name: element.name,
								imgs: [{
									src: element.img,
									width: '50%',
									top: '24%'
								}],
								fonts: [{
									text: `${Number(element.gold_price).toFixed(0)}金币`,
									top: '10%',
									fontColor: '#FD2A53',
									fontSize: 10,
								}],
								background: i % 2 == 0 ? '#FEE2EB' : '#FFEDFF'

							});
						}
					}
				});
			},

			startCallBack(num) {
				// 开始旋转
				if (!this.isable) {
					return;
				}
				
				if(this.status1 != 1){
					return this.$util.msg('活动未开启');
				}

				// if (!this.select_people) {
				// 	this.showToast();
				// 	return;
				// }

				if (this.balance < (this.singGoldPrice * num)) {
					return this.$util.msg('余额不足，请先充值金币');
				}


				// this.$refs.loading.open();
				this.isable = false;
				this.num = num;
				this.pending_btn_index = num == 1 ? 0 : num == 10 ? 1 : num == 100 ? 2 : -1;
				this.$refs.LuckDraw.play();
				this.$post('/active.trafficPrizeV3/setPrize', {
					num: num,
					rid: this.rid,
					to_uid: this.select_people
				}, false, (res) => {
					if (res.code == 401) {
						this.$native.toJinBiRecharge();
					} else {
						this.$util.msg(res.msg);
					}
					this.isable = true;
					// this.$refs.loading.close();
				}).then(res => {
					// this.$refs.loading.close();
					if (!this.skip_animation) {
						// this.$refs.LuckDraw.play();
						this.getBlance();
						this.success_list = res.data.prize_list;
						this.getAllPrice();
						// 模拟请求接口2s后返回数据
						const index = this.prizes.findIndex((element) => element.id == res.data
							.prize_list[
								0].id);
						// 得到中奖索引, 开始缓慢停止
						this.$refs.LuckDraw.stop(index);
						setTimeout(() => {
							this.pending_btn_index = -1;
						}, 1000);
					} else {
						this.getBlance();
						this.success_list = res.data.prize_list;
						this.getAllPrice();
						this.modal = true;
						this.getInit(false);
					}

				})

			},

			endCallBack(prize) {
				this.modal = true;
				this.getInit(false);
				// this.$native.sendGiftSuccess(this.success_list);
			},

			showToast() {
				this.toast = true;
				setTimeout(() => {
					this.toast = false;
				}, 2000);
			},

			getCol() {
				if (this.success_list.length == 1) {
					return 1;
				} else {
					return 4;
				}
			},

			// 选择赠送礼物目标
			onSelectPeople(id) {
				this.select_people = id;
			},

			openList() {
				this.list_modal = true;
				this.list = [];
				this.total = 1;
				this.page = 1;
				this.getList();
			},

			getList() {
				if (this.tab == 1) {
					this.$get('/active.trafficPrizeV3/getMyPrizeLog', {
						page: this.page
					}).then(res => {
						this.total = res.data.total;
						this.list.push(...res.data.data);
					})
				} else {
					this.$get('/active.dreamPrizeV3/getMyPrizeLog', {
						page: this.page
					}).then(res => {
						this.total = res.data.total;
						this.list.push(...res.data.data);
					})
				}
			},

			// 触底
			onReach() {
				this.page++;
				this.getList();
			},

			// 获取金币余额
			getBlance() {
				this.$post('/jinbi/getBalance', {}, false).then(res => {
					this.balance = Number(res.data.balance).toFixed(0);
				});
			},

			getAllPrice() {
				var price = 0;
				this.success_list.forEach(element => {
					var item_price = element.num * element.rmb_price
					price += item_price;
				});
				this.all_price = price * 10;
			},

			onAgree() {
				if (!this.first_check) {
					return this.$util.msg('请先阅读并同意《玩法须知和公约》');
				}
				this.first_modal = false;
				var timestamp = Date.parse(new Date());

				this.$native.setTimestamp(timestamp);
			},

			getTimestamp(flag) {
				if (flag) {
					this.first_modal = true;
				}
			},

			onTab(e) {
				if (this.isable == false) {
					return;
				}
				this.tab = e;
			},

			setInit() {
				for (var i = 0; i < this.prizeList2.length; i++) {
					var element = this.prizeList2[i];
					this.prizes2.push({
						id: element.id,
						name: element.name,
						fonts: [{
							text: `${Number(element.gold_price).toFixed(0)}金币`,
							top: '14%',
							fontColor: '#A53BFF',
							fontSize: 12,
						}],
						imgs: [{
							src: element.img,
							width: '36%',
							top: '36%'
						}],
						background: i % 2 == 0 ? '#F2E5FF' : '#FFF'
						// background: '#FE5072'
					});
				}
			},

			startCallBack2(num) {

				// 开始旋转
				if (!this.isable) {
					return;
				}
				
				if(this.status2 != 1){
					return this.$util.msg('活动未开启');
				}

				if (this.balance < (this.singGoldPrice2 * num)) {
					return this.$util.msg('余额不足，请先充值金币');
				}

				this.num = num;
				this.isable = false;
				// this.$refs.loading.open();
				this.pending_btn_index = num == 1 ? 0 : num == 10 ? 1 : num == 100 ? 2 : -1;
				this.$refs.LuckDraw2.play();
				this.$post('/active.dreamPrizeV3/setPrize', {
					num: num,
					to_uid: this.select_people || 0,
					rid: this.rid
				}, true, () => {
					this.isable = true;
					// this.$refs.loading.close();
				}).then(res => {
					// this.$refs.loading.close();
					this.success_list = res.data.prize_list;
					this.getBlance();
					this.getAllPrice();
					// 模拟请求接口2s后返回数据
					const index = this.prizes.findIndex((element) => element.id == res.data.prize_list[0].id);
					// 得到中奖索引, 开始缓慢停止
					this.$refs.LuckDraw2.stop(index);
					setTimeout(() => {
						this.pending_btn_index = -1;
					}, 1000);
				})

			},

			endCallBack2(prize) {
				this.modal = true;
				if (this.tab == 1) {
					this.getInit(false);
				} else {
					this.getInit2();
				}
			},

			getInit2() {
				this.$post('/active.dreamPrizeV3/getInitInfo').then(res => {
					this.isable = true;
					this.status2 = res.data.status;
					this.$refs.loading.close();
					this.singGoldPrice2 = res.data.singGoldPrice;
					this.prizeList2 = res.data.prizeList;
					if (!this.prizes2.length) {
						this.setInit();
					}
				});
			},

			onListTab(e) {
				this.list_tab = e;
				this.prizeTotal = 1;
				this.prizePage = 1;
				this.prizeLog = [];
				this.getPrizeLog();
			},

			getPrizeLog() {
				if (this.tab == 1) {
					this.$get('/active.trafficPrizeV3/getPrizeLog', {
						page: this.prizePage
					}).then(res => {
						this.prizeTotal = res.data.total;
						this.prizeLog.push(...res.data.data);
					})
				} else {
					this.$get('/active.dreamPrizeV3/getPrizeLog', {
						page: this.prizePage
					}).then(res => {
						this.prizeTotal = res.data.total;
						this.prizeLog.push(...res.data.data);
					})
				}
			},

			onReachPrizeLog() {
				if (this.prizeTotal > this.prizeLog.length) {
					this.prizePage++;
					this.getPrizeLog();
				}
			},

			colrdo(data) { //插入一条弹幕
				// Xxx在100连抽中获得价值5000金币的礼物
				var content = JSON.parse(data).data;
				this.$refs.lffBarrage.add({
					item: {
						nickname: content.nickname,
						num: content.num,
						gold_price: content.gold_price,
						giftname: content.giftname,
					}
				});
			},

			onPeopleClickTab(type){
				
				if(type == this.people_click_tab){
					return;
				}
				
				this.people_click_tab = type;
				
				if(type == 1){
					this.$refs.people.open();
				} else {
					this.$refs.friends.open();
				}
			},
			
			// 放入背包
			putInBag(){
				
			},
			
			// 重新选择
			onPeopleChooseAgain(){
				this.$refs.modal.close();
				this.$refs.chooseAgain.open();
			},

		},

		onLoad(option) {
			if (option.token) {
				uni.setStorageSync('token', option.token);
				uni.setStorageSync('cid', option.cid);
				uni.setStorageSync('terminal', option.terminal);
			}
			window.colrdo = this.colrdo;
			this.rid = option.rid || 0;
			this.select_people = option.to_uid || 0;
			this.preLoad();
			this.getInit(true);
			this.getInit2();
			this.getBlance();
			
			// this.$nextTick(()=>{
			// 	this.$refs.modal.open();
			// })


			// window.getPeopleList = this.getPeopleList;
			// this.$native.getPeopleList();

			// window.getTimestamp = this.getTimestamp;
			// this.$native.getTimestamp();
		}
	}
</script>

<style lang="less" scoped>
	.barrage {}

	.loading {
		position: fixed;
		z-index: 99;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: #FFF;
		padding-top: 20vh;
	}

	.wheel {
		padding: 42rpx 32rpx;
		background-size: 100% !important;
		min-height: 100vh;
	}

	.people_list {
		overflow: hidden;
		height: 180rpx;

		.people_content {
			.item {
				width: 112rpx;
				flex-shrink: 0;

				.avatar {
					position: relative;
					width: 88rpx;
					height: 88rpx;

					.user_avatar {
						width: 80rpx;
						height: 80rpx;
						border-radius: 40rpx;
					}

					.select_image {
						width: 88rpx;
						height: 88rpx;
						position: absolute;
						z-index: 2;
						top: 0;
						left: 0;
					}

				}

				text {
					font-size: 24rpx;
					color: #FFF3D9;
					line-height: 34rpx;
					max-width: 100rpx;
				}
			}
		}
	}

	.toast {
		width: 664rpx;
		height: 160rpx;
		background: url(https://qiniu-cdn.maeiyun.com//h5static/live/no_people_toast.png) 0 0 no-repeat;
		background-size: 100%;
		padding-top: 56rpx;
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFDE;
		text-align: center;
		position: fixed;
		top: 170rpx;
		left: 40rpx;
		transition: 0.6s;
		opacity: 0;
	}

	#toast {
		opacity: 1;
	}

	.blind {
		margin-top: 80rpx;

		.tab-btn {
			position: relative;
			z-index: 10;
			margin: 0 120rpx -30rpx;

			.item {
				width: 152rpx;
				height: 60rpx;
				background: linear-gradient(176deg, #FFFCF1 0%, #FFE1C7 100%);
				box-shadow: inset 0rpx 0rpx 2rpx 2rpx #FAA10F;
				border-radius: 36rpx;
				border: 4rpx solid #FDE6C0;
				font-size: 32rpx;
				color: #FF3015;
				line-height: 50rpx;
				text-align: center;
			}

			#select {
				width: 152rpx;
				height: 60rpx;
				background: linear-gradient(90deg, #FDA140 0%, #F9D997 50%, #FC9A29 100%);
				box-shadow: inset 0rpx 4rpx 8rpx 4rpx rgba(255, 255, 255, 0.69), inset 0rpx -4rpx 4rpx 0rpx rgba(255, 255, 255, 0.5);
				border-radius: 24rpx;
				border: 4rpx solid #FEAB00;
			}

			#select2 {
				width: 152rpx;
				height: 60rpx;
				width: 152rpx;
				height: 60rpx;
				background: linear-gradient(90deg, #390FF8 0%, #3C79FD 100%);
				border-radius: 36rpx;
				border: 4rpx solid #82DDFF;
				color: #FFFFFF;
			}
		}
	}

	.btn_box {
		margin-top: 44rpx;

		#btn_pending {
			box-shadow: 0 0 60rpx 10rpx white;
			transform: scale(1.1);
		}

		.btn {
			transform: scale(1);
			width: 212rpx;
			height: 108rpx;
			padding-top: 36rpx;
			transition: 0.3s;
			border-radius: 60rpx;
			overflow: hidden;

			text {
				font-weight: 500;
				font-size: 24rpx;
				color: #B60310;
			}
		}

		.btn1 {
			background: url(https://qiniu-cdn.maeiyun.com//h5static/live/start_1.png) 0 0 no-repeat;
			background-size: 100%;
		}

		.btn2 {
			background: url(https://qiniu-cdn.maeiyun.com//h5static/live/start_10.png) 0 0 no-repeat;
			background-size: 100%;
		}

		.btn3 {
			background: url(https://qiniu-cdn.maeiyun.com//h5static/live/start_100.png) 0 0 no-repeat;
			background-size: 100%;
		}
	}

	.gold_box {
		margin-top: 30rpx;

		.left {
			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 16rpx;
			}

			text {
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 40rpx;
			}
		}

		.right {
			background: #E7004E;
			border-radius: 24rpx;
			border: 4rpx solid #FF486D;
			padding: 0 14rpx;
			height: 48rpx;

			text {
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				margin-right: 8rpx;
				line-height: 36rpx;
			}
		}
	}

	.tags_list {
		position: fixed;
		z-index: 2;
		top: 90rpx;
		right: 22rpx;

		.line {
			width: 4rpx;
			height: 62rpx;
			background: radial-gradient(8% 34% at 50% 50%, #FFEACE 0%, #FFEACE 35%, #F1AF55 100%);
		}

		.tags {
			width: 60rpx;
			height: 120rpx;

			image {
				width: 60rpx;
				height: 120rpx;
			}
		}

		.center_line {
			width: 4rpx;
			height: 16rpx;
			background: radial-gradient(0% 34% at 50% 50%, #FFEACE 0%, #FFEACE 35%, #F1AF55 100%);
		}
	}

	.bottom_popup {
		height: 85vh;
		width: 100vw;
		background: #FFF;
		padding: 40rpx;
		border-radius: 42rpx 42rpx 0 0;

		background: linear-gradient(270deg, #BFEAFF 0%, #EBF8FF 54%, #D8CBFF 100%);

		.popup_title {
			margin-bottom: 40rpx;

			.liner-text {
				font-size: 36rpx;
				line-height: 44rpx;
				margin-bottom: 8rpx;
				color: transparent;
				background-clip: text;
				background-image: linear-gradient(21deg, #3A54FF 0%, #B720FE 33%, #7F6EFF 100%);
				font-family: 'gongfu';
			}
		}

		.popup_title_tab {
			width: 300rpx;
			margin-bottom: 40rpx;

			.item {
				.liner-text {
					font-size: 36rpx;
					line-height: 44rpx;
					margin-bottom: 8rpx;
					color: transparent;
					background-clip: text;
					background-image: linear-gradient(21deg, #3A54FF 0%, #B720FE 33%, #7F6EFF 100%);
					font-family: 'gongfu';
				}

				.text {
					font-size: 36rpx;
					line-height: 44rpx;
					margin-bottom: 8rpx;
					color: #D3D2FF;
					font-family: 'gongfu';
				}

				i {
					width: 40rpx;
					height: 4rpx;
					border-radius: 2rpx;
					background: transparent;
				}
			}

			#select {
				i {
					background: linear-gradient(111deg, #3A54FF 0%, #B720FE 33%, #7F6EFF 100%);
				}
			}
		}

		.popup_content {
			flex: 1;
			overflow: hidden;

			scroll-view {
				height: 100%;
				border-radius: 24rpx;
				overflow: hidden;
			}

			.rich {
				background: #FFF;
				padding: 48rpx 40rpx;
				min-height: 100%;

				.text {
					font-size: 26rpx;
					color: #333;
					line-height: 36rpx;
				}

				.table-tit {
					font-size: 28rpx;
					color: #6329A7;
					font-weight: 600;
					margin-top: 18rpx;
				}

				.table {
					width: 600rpx;
					background: #FD3685;
					border-radius: 16rpx;
					border: 2rpx solid #E7E786;
					overflow: hidden;
					margin-top: 18rpx;

					.header {
						.item {
							flex: 1;
							overflow: hidden;
							height: 72rpx;
							border-right: 2rpx solid #E7E786;
							border-bottom: 2rpx solid #E7E786;

							text {
								font-size: 26rpx;
								color: #FFF;
								line-height: 36rpx;
							}
						}
					}

					.table_list {
						.item {
							flex: 1;
							overflow: hidden;
							height: 72rpx;
							background: #FFFFFF;
							border-right: 2rpx solid #E7E786;
							border-bottom: 2rpx solid #E7E786;

							image {
								width: 36rpx;
								height: 36rpx;
								margin: 0 12rpx 0 16rpx;
							}

							text {
								font-weight: 500;
								font-size: 24rpx;
								color: #7C0100;
								line-height: 32rpx;
							}
						}
					}

					#no_right {
						border-right: 0;
					}

					#no_bottom {
						border-bottom: 0;
					}
				}
			}

			.list {
				width: 670rpx;
				background: #FFF;

				.item {
					overflow: hidden;
					padding: 24rpx;
					margin-bottom: 20rpx;
					border-bottom: 2rpx solid #C9C1E2;

					.left {
						flex: 1;
						overflow: hidden;

						.avatar {
							margin-right: 24rpx;

							image {
								width: 96rpx;
								height: 96rpx;
								border-radius: 48rpx;
								border-radius: 2rpx solid #AF0006;
							}
						}

						.text {
							flex: 1;
							overflow: hidden;

							.name {
								font-weight: 500;
								font-size: 30rpx;
								color: #6329A7;
								line-height: 32rpx;
							}

							.info {
								margin: 4rpx 0;

								text {
									font-size: 26rpx;
									color: #6329A7;
									line-height: 32rpx;
								}

								i {
									font-size: 26rpx;
									color: #FA3FCB;
									line-height: 32rpx;
									font-style: normal;
								}
							}

							.time {
								font-size: 24rpx;
								color: #6329A7;
								line-height: 34rpx;
							}
						}
					}

					.right {
						width: 96rpx;
						height: 96rpx;
						margin-left: 20rpx;

						image {
							width: 96rpx;
							height: 96rpx;
						}
					}
				}
			}
		}
	}

	.success {
		width: 686rpx;

		.grid {
			width: 686rpx;
			height: 608rpx;
			background: url(https://qiniu-cdn.maeiyun.com//h5static/live/wheel_success_bg.png) 0 0 no-repeat;
			background-size: 100%;
			padding: 116rpx 50rpx 0;

			.item {
				margin-bottom: 12rpx;
				width: 120rpx;
				height: 120rpx;
				border-radius: 24rpx;
				background: #FFF;
				overflow: hidden;
				position: relative;

				.price {
					height: 36rpx;
					background: #FD2A53;
					border-radius: 18rpx;
					border: 4rpx solid #FFFFFF;
					padding: 0 8rpx;
					position: absolute;
					right: 4rpx;
					bottom: 4rpx;
					z-index: 2;

					text {
						font-size: 24rpx;
						color: #FFFFFF;
					}
				}

				image {
					width: 120rpx;
					height: 120rpx;
				}

			}

			.modal-gift-price {
				margin-bottom: 24rpx;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 8rpx;
				}

				text {
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
				}
			}
		}

		.all_price {
			margin: 20rpx 0 24rpx;

			text {
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 40rpx;
			}

			image {
				width: 32rpx;
				height: 32rpx;
				margin-left: 12rpx;
			}
		}

		.icon-close {
			margin-top: 24rpx;
		}

		.success_again {
			width: 212rpx;
			height: 108rpx;

			.btn {
				width: 212rpx;
				height: 108rpx;
				padding-top: 36rpx;

				text {
					font-weight: 500;
					font-size: 24rpx;
					color: #B60310;
				}
			}

			.btn1 {
				background: url(https://qiniu-cdn.maeiyun.com//h5static/live/start_1.png) 0 0 no-repeat;
				background-size: 100%;
			}

			.btn2 {
				background: url(https://qiniu-cdn.maeiyun.com//h5static/live/start_10.png) 0 0 no-repeat;
				background-size: 100%;
			}

			.btn3 {
				background: url(https://qiniu-cdn.maeiyun.com//h5static/live/start_100.png) 0 0 no-repeat;
				background-size: 100%;
			}
		}

		.close_text {
			font-size: 24rpx;
			color: #FFFFFF;
			line-height: 34rpx;
			margin-top: 24rpx;
		}

	}

	.success2 {
		width: 616rpx;
		background: linear-gradient(270deg, #BFEAFF 0%, #EBF8FF 54%, #D8CBFF 100%);
		border-radius: 40rpx;
		padding: 56rpx 54rpx 50rpx;

		.title {
			width: 324rpx;
			height: 32rpx;
			margin-bottom: 60rpx;
		}

		.grid {
			width: 100%;

			/deep/ .u-grid-item--hover-class {
				opacity: 1;
			}

			.item {
				width: 100%;

				.price {
					align-items: flex-end;
					padding: 8rpx 0 26rpx;

					text {
						font-weight: 600;
						font-size: 28rpx;
						color: #131313;
					}

					i {
						font-weight: 600;
						font-size: 24rpx;
						color: #131313;
						font-style: normal;
					}
				}

				image {
					width: 112rpx;
					height: 112rpx;
				}
			}
		}

		.all_price {
			font-size: 28rpx;
			color: #7B7690;
			line-height: 40rpx;
			padding: 20rpx 0 40rpx;
		}

		.btn {
			width: 400rpx;
			height: 96rpx;
			background: linear-gradient(180deg, #4542FF 0%, #9F64FA 100%);
			border-radius: 56rpx;
			font-weight: 500;
			font-size: 36rpx;
			color: #FFFBDC;
			line-height: 96rpx;
			text-align: center;
		}
	}

	.first_popup {
		width: 600rpx;
		height: 60vh;
		background: url(https://qiniu-cdn.maeiyun.com//h5static/live/wheel_agree_bg.png) 0 0 no-repeat;
		background-size: 100%;
		padding: 118rpx 40rpx;
		overflow: hidden;

		.first_title {
			font-family: 'gongfu';
			color: #FF3E90;
		}

		.first_content {
			flex: 1;
			overflow: hidden;
			margin: 0 0 30rpx;

			scroll-view {
				height: 100%;

				view {
					font-size: 26rpx;
					color: #FFFFFF;
					line-height: 36rpx;
				}
			}
		}

		.first_check {
			.icon {
				margin-right: 8rpx;
			}

			.first_text {
				text {
					font-size: 26rpx;
					color: #FFFFFF;
					line-height: 36rpx;
				}

				i {
					font-size: 26rpx;
					color: #FFDA9F;
					line-height: 36rpx;
					font-style: normal;
				}
			}

		}

		.first_btn {
			margin-top: 40rpx;
			width: 500rpx;

			.first_btn_item {
				width: 240rpx;
				height: 89rpx;
				background-size: 100% !important;

				text {
					font-family: gongfu;
					font-size: 36rpx;
					color: #FFFFFF;
					line-height: 44rpx;
				}
			}
		}

	}

	.skip_animation {
		width: 224rpx;
		height: 72rpx;
		background: linear-gradient(176deg, #FFFCF1 0%, #FFE1C7 100%);
		box-shadow: inset 0rpx 0rpx 2rpx 2rpx #FAA10F;
		border-radius: 36rpx;
		border: 4rpx solid #FDE6C0;
		margin: -20rpx auto 16rpx;
		position: relative;
		z-index: 10;
		padding-left: 16rpx;

		.icon {
			width: 34rpx;
			height: 34rpx;
			border-radius: 4rpx;
			border: 4rpx solid #FF3015;
			margin-right: 12rpx;
		}

		text {
			font-size: 32rpx;
			color: #FF3015;
			font-family: 'gongfu';
			line-height: 72rpx;
		}
	}

	.people-tab {
		width: 416rpx;
		
		#select {
			background: linear-gradient( 117deg, #EA7903 0%, #FFC13E 50%, #FC9A29 100%);
			border: 4rpx solid #EE880F;
		}
		
		.item {
			width: 200rpx;
			height: 64rpx;
			background: #E7004E;
			border-radius: 16rpx;
			border: 4rpx solid #FF486D;
			padding: 0 20rpx;
			
			.left {
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 36rpx;
			}
			
			.right {
				image {
					width: 40rpx;
					height: 40rpx;
					background: #D8D8D8;
					border-radius: 20rpx;
					margin-right: 12rpx;
				}
			}
		}
	}

	.choose-people {
		width: 90vw;
		height: 80vh;
		background: #FFFFFF;
		border-radius: 16rpx;
		overflow: hidden;
		
		.item {
			overflow: hidden;
			padding: 12rpx 32rpx;
			.people-item {
				flex: 1;
				overflow: hidden;
				.avatar {
					width: 128rpx;
					height: 128rpx;
					position: relative;
					margin-right: 8rpx;
					
					.avatar-border-image {
						position: absolute;
						z-index: 2;
						width: 128rpx;
						height: 128rpx;
						top: 0;
						left: 0;
					}
					
					.avatar-image {
						width: 96rpx;
						height: 96rpx;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50% , -50%);
						z-index: 1;
					}
				}
		
				.left {
					flex: 1;
					overflow: hidden;
					.top {
						overflow: hidden;
						text {
							font-weight: 500;
							font-size: 32rpx;
							color: #131313;
							max-width: 200rpx;
						}
						
						view {
							width: 104rpx;
							height: 32rpx;
							text-align: center;
							font-weight: 500;
							font-size: 24rpx;
							color: #FFFFFF;
							line-height: 28rpx;
							background: plum;
						}
					}
					
					.bottom {
						overflow: hidden;
						margin-top: 16rpx;
						text {
							font-weight: 500;
							font-size: 24rpx;
							color: #131313;
							max-width: 200rpx;
						}
						
						image {
							width: 24rpx;
							height: 24rpx;
							margin: 0 4rpx 0 12rpx;
						}
						
						i {
							font-weight: 500;
							font-size: 24rpx;
							color: #FFFFFF;
							font-style: normal;
						}
					}
				}
		
			}
			
			.select-image {
				width: 40rpx;
				height: 40rpx;
				margin-left: 16rpx;
				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}

	.choose-friends {
		width: 90vw;
		height: 80vh;
		background: #FFFFFF;
		border-radius: 16rpx;
		overflow: hidden;
		padding: 32rpx 0;
		
		.firends-input {
			height: 80rpx;
			background: #F1F1F1;
			border-radius: 16rpx;
			margin: 0 32rpx 16rpx 32rpx;
			padding: 0 32rpx;
			width: calc(90vw - 32rpx);
			
			input {
				width: 100%;
				height: 100%;
				text-align: center;
				font-size: 28rpx;
				color: #333;
			}
		}
		
		scroll-view {
			flex: 1;
		}
		
		.friends-list {
			width: 90vw;
			overflow: hidden;
			
			.item {
				overflow: hidden;
				padding: 16rpx 40rpx;
				.select-image {
					width: 40rpx;
					height: 40rpx;
					margin-left: 16rpx;
					image {
						width: 40rpx;
						height: 40rpx;
					}
				}
				
				.firends-content {
					flex: 1;
					overflow: hidden;
					.avatar {
						width: 92rpx;
						height: 92rpx;
						border-radius: 46rpx;
						overflow: hidden;
						margin-right: 20rpx;
						image {
							width: 92rpx;
							height: 92rpx;
						}
					}
					
					.right {
						flex: 1;
						overflow: hidden;
						.top {
							font-weight: 500;
							font-size: 32rpx;
							color: #131313;
						}
						
						.bottom {
							overflow: hidden;
							margin-top: 6rpx;
							text {
								font-weight: 500;
								font-size: 24rpx;
								color: #131313;
								max-width: 200rpx;
							}
							
							image {
								width: 24rpx;
								height: 24rpx;
								margin: 0 4rpx 0 12rpx;
							}
							
							i {
								font-weight: 500;
								font-size: 24rpx;
								color: #FFFFFF;
								font-style: normal;
							}
						}
					}
				}
				
			}
		}
	}

	.errer-modal {
		width: 600rpx;
		height: 400rpx;
		background: linear-gradient( 180deg, #E5DDFF 0%, #FFD2F2 20%, #FFF 40%);
		border-radius: 40rpx;
		border: 2rpx solid #FFFFFF;
		
		.errer-icon {
			width: 112rpx;
			height: 112rpx;
			background: linear-gradient( 90deg, #FD2A53 0%, #FA45C6 100%);
			border-radius: 56rpx;
			padding: 12rpx 0 16rpx;
			justify-content: space-between;
			position: absolute;
			top: -56rpx;
			left: 50%;
			transform: translateX(-50%);
			z-index: 2;
			.errer-icon-big {
				width: 14rpx;
				height: 60rpx;
				background: #FFFFFF;
				border-radius: 6rpx;
			}
			
			.errer-icon-small {
				width: 14rpx;
				height: 14rpx;
				background: #FFFFFF;
				border-radius: 7rpx;
			}
		}
		
		.errer-text {
			margin: 80rpx 0 64rpx;
			view {
				font-weight: 600;
				font-size: 40rpx;
				color: #FD2A53;
				line-height: 56rpx;
				text-align: center;
			}
		}
		
		.errer-btn {
			width: 520rpx;
			view {
				width: 248rpx;
				height: 96rpx;
				border-radius: 48rpx;
				text {
					font-weight: 500;
					font-size: 28rpx;
				}
			}
			
			.cancel {
				border: 2rpx solid #FD2A53;
				background: #FFF;
				text {
					color: #FD2A53;
				}
			}
			
			.comfirm {
				background: linear-gradient( 90deg, #FD2A53 0%, #FA45C6 100%);
				text {
					color: #FFFFFF;
				}
			}
		}
	}

</style>